<template>
  <el-pagination
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total"
    @update:current-page="handleCurrentChange"
    @update:page-size="handleSizeChange"
    layout="total, sizes, prev, pager, next, jumper"
  />
</template>

<script lang="ts">
import { defineComponent, ref, watch } from "vue";
import { ElPagination } from "element-plus";

export default defineComponent({
  components: {
    ElPagination,
  },
  props: {
    currentPage: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    total: {
      type: Number,
      required: true,
    },
  },
  emits: ["update:currentPage", "update:pageSize", "change"],
  setup(props, { emit }) {
    function handleCurrentChange(newPage: number) {
      window.scrollTo(0, 0);
      emit("update:currentPage", newPage);
      emit("change");
    }

    function handleSizeChange(newSize: number) {
      emit("update:pageSize", newSize);
      emit("change");
    }

    watch(
      () => props.total,
      (newTotal) => {
        // 当总数改变时，可能需要重置当前页面
      }
    );

    return {
      handleCurrentChange,
      handleSizeChange,
    };
  },
});
</script>
